﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<title>blog式日历控件</title>
	<link rel="stylesheet" href="d.css" />
	<script type="text/javascript" src="d.js"></script>
</head>
<body>
	<div class="Calendar">
		<div id="idCalendarPre">&lt;&lt;</div>
		<div id="idCalendarNext">&gt;&gt;</div>
		<span id="idCalendarYear"></span>年
		<span id="idCalendarMonth"></span>月
		<table cellspacing="0">
			<thead>
				<tr>
					<td>日</td>
					<td>一</td>
					<td>二</td>
					<td>三</td>
					<td>四</td>
					<td>五</td>
					<td>六</td>
				</tr>
			</thead>
			<tbody id="idCalendar"></tbody>
		</table>
	</div>
	
	<input type="button" id="idCalendarPreYear" value="上一年" />
	<input type="button" id="idCalendarNow" value="当前月" />
	<input type="button" id="idCalendarNextYear" value="下一年" />
	
	<script type="text/javascript">
		var cale = new Calendar("idCalendar", {
			selectDay: new Date().setDate(10),
			onSelectDay: function(o){o.className = "onSelect";},
			onToday: function(o){o.className = "onToday";},
			onFinish: function(){
				$$("idCalendarYear").innerHTML = this.year;
				$$("idCalendarMonth").innerHTML = this.month;
				var flag = [10, 15, 20];
				for(var i=0, len= flag.length; i<len; i++){
					this.days[flag[i]].innerHTML = "<a href='javascript:void(0);' onclick=\"alert('日期是:"+this.year + "/" +this.month + "/" + flag[i]+"');return false;\">" + flag[i] + "</a>";
				}
			}
		});
		
		$$("idCalendarPre").onclick = function(){
			cale.preMonth();
		}
		$$("idCalendarNext").onclick = function(){
			cale.nextMonth();
		}
		
		$$("idCalendarPreYear").onclick = function(){
			cale.preYear();
		}
		$$("idCalendarNextYear").onclick = function(){
			cale.nextYear();
		}
		
		$$("idCalendarNow").onclick = function(){
			cale.nowMonth();
		}
	</script>
	
</body>
</html>